<template>
    <div class="r-list" ref="all" @mouseover="onStop" @mouseout="onRun">
        <div class="r-item" v-for="item in list" :key="item.id" ref="itemRefs" :style="style(item)" v-html="item.txt"></div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from "vue";
import { uuidCreate } from "@/comm/uuid";

const warpData = (txt: string) => {
    return {
        id: uuidCreate(),
        txt: txt,
        x: 0,
        width: 0
    };
};

const temp = [
    `1小时 大笔转入 <span class="main-color">ETH</span>`,
    "2小时 大笔转入 ETH",
    "3小时 大笔转入 ETH",
    `4小时 大笔转入 <span class="main-color">ETH</span>`,
    "5小时 大笔转入 ETH",
    "6小时 大笔转入 ETH",
    `7小时 大笔转入 <span class="main-color">ETH</span>`,
    "8小时 大笔转入 ETH",
    "9小时 大笔转入 ETH",
    "10小时 大笔转入 ETH",
    "11小时 大笔转入 ETH",
    "12小时 大笔转入  ETH"
];

const list = reactive<any[]>(temp.map(i => warpData(i)));
const itemRefs = ref([]);
const all = ref();
let space = 1;
let running = true;
let speed = 1;

const onStop = () => {
    // console.log("stop")
    running = false;
};
const onRun = () => {
    // console.log("run")
    running = true;
};

onMounted(() => {
    let x = 0;

    itemRefs.value.forEach((element: any, i) => {
        list[i].x = x;
        list[i].width = element.clientWidth;
        x += list[i].width + space;
    });
    anim();
    // console.log("ddd", all)
});

const anim = () => {
    if (running) {
        //最远的元素位置
        let max = all.value.clientWidth;
        list.forEach(i => {
            if (i.x + i.width > max) {
                max = i.x + i.width;
            }
        });
        list.forEach(i => {
            i.x -= speed;
            if (i.x < -i.width) {
                i.x = max + space;
            }
        });
    }

    requestAnimationFrame(anim);
};

const style = computed(() => (item: any) => {
    return {
        transform: `translateX(${item.x}px)`
    };
});
</script>

<style lang="less" scoped>
.r-list {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;

    .r-item {
        display: flex;
        align-items: center;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        font-size: 14px;
        padding-right: 20px;
        &:after {
            content: "";
            display: block;
            width: 1px;
            height: 17px;
            background: #3d4355;
            margin-left: 20px;
        }
    }
}
</style>
